<template>
	<view class="container">
		<view class="carousel">
			<swiper indicator-dots circular="true" duration="400">
				<swiper-item class="swiper-item" v-for="(item, index) in cartListItem" :key="index">
					<view class="image-wrapper">
						<image :src="item.picture" class="loaded" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<view class="introduce-section" v-for="(item, index) in cartListItem" :key="index">
			<text class="title">{{ item.goodname }}</text>
			<!-- 出售部分-->
			<view>
				<view class="price-box">
					<text class="price-tip">¥</text>
					<text class="price">{{ item.price }}</text>
				</view>
			</view>
		</view>


		<view class="c-list">
			<view class="c-row b-b" v-for="(attr, index) in goodsAttibute" :key="index">
				<text class="tit">{{ attr.name }}</text>
				<view class="attr-tag">
					<text>{{ attr.value }}</text>
				</view>
			</view>
		</view>


		<view class="detail-desc">
			<view class="d-header"><text>商品详情</text></view>
			<rich-text :nodes="desc | formatRichText"></rich-text>
		</view>


		<!--推荐商品-->
		<view class="item-list" v-if="recommendGoods.length > 0">
			<view class="tuijian-top">
				大家都在买
			</view>
			<view class="tuijian-section">
				<view class="tuijian-item" v-for="(item, index) in recommendGoods" :key="index">
					<view class="image-wrapper">
						<image :src="item.image" class="item-image" mode="aspectFill" @click="navToGoodsDetail(item)">
						</image>
					</view>
					<text class="title ellipsis-W">{{ item.name }}</text>
					<view class="item-foot">
						<text class="price">￥{{ item.price }}</text>
						<image src="/static/gouwuche.png" class="gwc-btn" @click="addrcart($event, item)"></image>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
	import {
		isEmptyObj,
		getCache,
		setCache,
		createUuid
	} from '../../utils';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			uniNumberBox,
			tkiBarcode
		},
		data() {
			return {
				cartNum: 0,
				opations: {
					height: '130',
					width: '4',
					fontSize: 40,
					marginTop: 10,
					marginBottom: 0
				},
				specClass: 'none',
				skuSelected: {},
				skuList: [],
				barcode: '', //保留给扫码购
				goods: {},
				tj: {},
				is_tj: false,
				sale_price: 0, //商品售价   goods.sale_price  或 sku.sale_price
				favorite: false,
				imgList: [
					//{'image':'/static/errorImage.jpg'}
				],
				goodsAttibute: [],
				desc: '',
				collects: '',
				serviceContent: '',
				number: 1,
				max: 100,
				btn_buy: '立即购买',
				sharestr: '',
				recommendGoods: [],
				cartListItem: []
			};
		},
		computed: {
			...mapState('user', ['token']),
			...mapState('cart', ['mycart']),
			...mapState('sys', ['service']),
		},
		onLoad(options) {

			const array = this.mycart.filter(item => item.id === Number(options.id));
			this.cartListItem = array;
			if (this.goods.attribute) {
				this.goodsAttibute = this.goods.attribute
			}

			//设置默认sku
			this.init_sku();
			this.sale_price = this.goods.sale_price;
			//加载商品sku
			// this.loadGoods()
			//this.loadComment();
			// //添加我的足迹
			// this.addLook();
			// this.sharestr = '/pages/product/product?data=' + JSON.stringify({ goods: this.goods });

	

			//加载关联商品
			// this.loadRecommend();
		},

		//#ifdef MP-WEIXIN
		onShareAppMessage() {
			let title = '伙翔商城' + this.goods.name;
			if (this.sharestr != '') {
				return {
					title: title,
					path: this.sharestr,
				}
			}
		},
		//#endif
		methods: {
			...mapMutations('sys', ['setService']),
			...mapMutations('user', ['setLooks']),
			...mapMutations('cart', ['setCart', 'clearCart']),
			init_sku() {
				this.skuSelected = {
					id: 0,
					quantity: this.goods.quantity,
					spec: '',
					sale_price: this.goods.sale_price
				};
			},
			toCallPhone() {
				uni.makePhoneCall({
					phoneNumber: this.service.phone
				});
			},
			loadGoods() {
				var param = {
					goods_id: this.goods.id,
					token: this.token,
				}
				this.$ajax.get('goods/detail', param).then(data => {
					if (0 == data.error) {
						this.goods = Object.assign({}, this.goods, data.data.goods);
						this.favorite = this.goods.favorite;
						if (data.data.sku.length > 0) {
							this.skuList = data.data.sku;
						}
						this.tj = data.data.tj;
						this.is_tj = data.data.is_tj;
						if (data.data.goods.description) {
							this.desc = data.data.goods.description;
						}

						if (this.tj.running == 1) {
							this.btn_buy = '特价购买'
						}

					}
				})
			},

			loadComment() {
				this.$ajax.get('goods/comment', {
					goods_id: this.goods.id
				}).then(data => {
					if (0 == data.error) {}
				})
			},
			//添加我的足迹
			addLook() {
				if (!this.token) {
					return false;
				}
				var param = {
					goods_id: this.goods.id,
					token: this.token
				}
				this.$ajax.get('member/add_look', param).then(data => {
					//do none
				})
			},
			//收藏
			toFavorite() {
				if (!this.token) {
					this.$toast('请先登录');
					return false;
				}
				var param = {
					goods_id: this.goods.id,
					token: this.token
				}
				var url = 'member/add_collect';
				if (this.favorite) { //取消收藏
					url = 'member/remove_collect';
				}
				this.$ajax.get(url, param).then(data => {
					if (0 == data.error) {
						this.$toast(data.msg);
						this.favorite = !this.favorite;
					} else {
						this.$toast(data.msg);
					}
				})
			},
			numberChange(data) {
				this.number = data.number;
			},
			loadRecommend() {
				let param = {
					goods_id: this.goods.id
				}
				this.$ajax.get('goods/get_goods_recommend', param).then(data => {
					if (0 == data.error) {
						this.recommendGoods = data.data;
					}
				})
			},
			navToGoodsDetail(item) {
				return uni.navigateTo({
					url: `/pages/product/product?data=${JSON.stringify({
					goods: item
				})}`
				});
			},
			addrcart(e, item) { //推荐商品加入购物车
				let cartgoods = {
					'goods': item,
					'sku': {
						id: 0,
						quantity: item.quantity,
						sale_price: item.sale_price
					},
					'goods_id': item.id,
					'store_id': 0, //默认都为0  保留多店铺划分
					'sku_id': 0,
					'quantity': 1,
					'price': item.sale_price
				}
				let cartList = this.mycart;
				if (isEmptyObj(cartList)) {
					cartList.push(cartgoods);
				} else {
					var updated = 0; //修改数量标记
					for (let i = 0, l = cartList.length; i < l; i++) {
						if (cartList[i].sku_id == sku_id) {
							cartList[i].quantity = cartList[i].quantity + 1;
							updated = 1; //已经处理标识
							break;
						}
					}
					if (updated == 0) { //修改数量
						cartList.push(cartgoods);
					}
				}
				this.cartNum = cartList.length;
				this.setCart(cartList);
				this.$toast('加入成功');
			},


			/**
			 * store_id  sku_id quantity
			 * 不和服务端同步
			 */
			addcart() {
				//this.clearCart();
				if (this.skuList.length > 0) {
					if (isEmptyObj(this.skuSelected) || this.skuSelected.id <= 0) {
						return this.$api.msg('请选择规格');
					}
				}

				if (this.number < 1) {
					return this.$api.msg('请填写数量');
				}
				let item = this.goods;
				item.description = ''; //富文本会引起json错误
				let cartgoods = {
					'goods': item,
					'sku': this.skuSelected,
					'goods_id': this.goods.id,
					'store_id': 0,
					'sku_id': this.skuSelected.id,
					'quantity': this.number,
					'price': this.skuSelected.sale_price
				}
				let cartList = this.mycart;
				if (isEmptyObj(cartList)) {
					cartList.push(cartgoods);
				} else {
					var updated = 0; //修改数量标记
					for (let i = 0, l = cartList.length; i < l; i++) {
						if (cartList[i].goods_id == this.goods.id && cartList[i].sku_id == this.skuSelected.id) {
							cartList[i].quantity = cartList[i].quantity + this.number;
							updated = 1; //新增
							break;
						}
					}
					if (updated == 0) { //修改数量
						cartList.push(cartgoods);
					}
				}
				this.cartNum = cartList.length;
				this.setCart(cartList);
				this.$toast('加入成功');
			},

			buy() { //立即购买
				if (!this.token) {
					this.$api.msg('请先登录');
					setTimeout(function() {
						return uni.navigateTo({
							url: '/pages/public/login'
						})
					}, 500)
					return false;
				}
				if (this.skuList.length > 1) {
					if (isEmptyObj(this.skuSelected) || 0 == this.barcode.length) {
						return this.$api.msg('请选择规格');
					}
				}
				if (this.number <= 0) {
					return this.$api.msg('请填写购买数量');
				}
				let goodsData = [];
				let price = this.sale_price;
				let tj_buy = 0;
				if (this.is_tj && this.tj.running == 1) {
					price = this.tj.tj_price;
					tj_buy = 1;
				}
				let item = this.goods;
				item.description = '';
				goodsData.push({ //数据可购物车统一
					'goods': item,
					'sku': this.skuSelected,
					'goods_id': this.goods.id,
					'store_id': 0,
					'sku_id': this.skuSelected.id,
					'quantity': this.number,
					'tj_buy': tj_buy,
					'tj_id': this.tj.id || 0,
					'price': price,
				});
				return uni.navigateTo({
					url: `/pages/order/createOrder?buy_type=1&data=${JSON.stringify({
					goodsData: goodsData
				})}`
				});
			},
			stopPrevent() {},
			toggleSpec() {
				if (this.specClass === 'show') {
					this.specClass = 'hide';
					setTimeout(() => {
						this.specClass = 'none';
					}, 250);
				} else if (this.specClass === 'none') {
					this.specClass = 'show';
				}
			},
			//选择规格
			selectSpec(item) {
				this.skuSelected = item;
				this.barcode = item.barcode;
				this.sale_price = item.sale_price

				if (item.quantity > 0) this.max = item.quantity;
				if (this.tj.running == 1) {
					this.sale_price = this.tj.tj_price;
					this.max = this.tj.quantity;
				}
			},

		},
		filters: {
			formatRichText(html) { //富文本图片处理
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img  style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 160upx;
	}

	//#ifdef MP-WEIXIN
	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 14px;
		padding-right: 14px;
		box-sizing: border-box;
		font-size: 18px;
		text-align: center;
		text-decoration: none;
		line-height: 1;
		border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
	}

	button::after {
		border: none;
		background-color: none;
	}

	//#endif


	.place {
		height: 40rpx;
		background-color: $nav-bg;
	}

	.icon-you {
		font-size: $font-base + 2upx;
		color: #888;
	}

	.carousel {
		height: 722upx;
		position: relative;

		swiper {
			height: 100%;
		}

		.image-wrapper {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			display: flex;
			justify-content: center;
			align-content: center;
			height: 750upx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.numer-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.bot-row {
			width: 100%;
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 标题简介 */
	.introduce-section {
		background: #fff;
		padding: 20upx 30upx;

		.title {
			font-size: 32upx;
			color: $font-color-dark;
			height: 50upx;
			line-height: 50upx;
		}

		.price-box {
			display: flex;
			align-items: baseline;
			height: 64upx;
			padding: 10upx 0;
			font-size: 26upx;
			color: $font-color-price;
		}

		.price {
			font-size: $font-lg + 2upx;
		}

		.m-price {
			margin: 0 12upx;
			color: $font-color-light;
			text-decoration: line-through;
		}

		.coupon-tip {
			align-items: center;
			padding: 4upx 10upx;
			background: $font-color-price;
			font-size: $font-sm;
			color: #fff;
			border-radius: 6upx;
			line-height: 1;
			transform: translateY(-4upx);
		}

		.bot-row {
			display: flex;
			align-items: center;
			height: 50upx;
			font-size: $font-sm;
			color: $font-color-light;

			text {
				flex: 1;
			}
		}
	}

	/* 分享 */
	.share-section {
		display: flex;
		align-items: center;
		color: $font-color-base;
		background: linear-gradient(left, #fdf5f6, #fbebf6);
		padding: 12upx 30upx;

		.share-icon {
			display: flex;
			align-items: center;
			width: 70upx;
			height: 30upx;
			line-height: 1;
			border: 1px solid $uni-color-primary;
			border-radius: 4upx;
			position: relative;
			overflow: hidden;
			font-size: 22upx;
			color: $uni-color-primary;

			&:after {
				content: '';
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				left: -20upx;
				top: -12upx;
				position: absolute;
				background: $uni-color-primary;
			}
		}

		.icon-xingxing {
			position: relative;
			z-index: 1;
			font-size: 24upx;
			margin-left: 2upx;
			margin-right: 10upx;
			color: #fff;
			line-height: 1;
		}

		.tit {
			font-size: $font-base;
			margin-left: 10upx;
		}

		.icon-bangzhu1 {
			padding: 10upx;
			font-size: 30upx;
			line-height: 1;
		}

		.share-btn {
			flex: 1;
			text-align: right;
			font-size: $font-sm;
			color: $uni-color-primary;
		}

		.icon-you {
			font-size: $font-sm;
			margin-left: 4upx;
			color: $uni-color-primary;
		}
	}

	.c-list {
		font-size: $font-sm + 2upx;
		color: $font-color-base;
		background: #fff;

		.c-row {
			display: flex;
			align-items: center;
			padding: 20upx 30upx;
			position: relative;
		}

		.tit {
			width: 140upx;
		}

		.con {
			flex: 1;
			color: $font-color-dark;

			.selected-text {
				margin-right: 10upx;
			}
		}

		.bz-list {
			height: 40upx;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;

			text {
				display: inline-block;
				margin-right: 30upx;
			}
		}

		.con-list {
			flex: 1;
			display: flex;
			flex-direction: column;
			color: $font-color-dark;
			line-height: 40upx;
		}

		.red {
			color: $uni-color-primary;
		}
	}

	/* 评价 */
	.eva-section {
		display: flex;
		flex-direction: column;
		padding: 20upx 30upx;
		background: #fff;
		margin-top: 16upx;

		.e-header {
			display: flex;
			align-items: center;
			height: 70upx;
			font-size: $font-sm + 2upx;
			color: $font-color-light;

			.tit {
				font-size: $font-base + 2upx;
				color: $font-color-dark;
				margin-right: 4upx;
			}

			.tip {
				flex: 1;
				text-align: right;
			}

			.icon-you {
				margin-left: 10upx;
			}
		}
	}

	.eva-box {
		display: flex;
		padding: 20upx 0;

		.portrait {
			flex-shrink: 0;
			width: 80upx;
			height: 80upx;
			border-radius: 100px;
		}

		.right {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-base;
			color: $font-color-base;
			padding-left: 26upx;

			.con {
				font-size: $font-base;
				color: $font-color-dark;
				padding: 20upx 0;
			}

			.bot {
				display: flex;
				justify-content: space-between;
				font-size: $font-sm;
				color: $font-color-light;
			}
		}
	}

	/*  详情 */
	.detail-desc {
		background: #fff;
		margin-top: 2upx;

		.d-header {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			position: relative;

			text {
				padding: 0 20upx;
				background: #fff;
				position: relative;
				z-index: 1;
			}

			&:after {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translateX(-50%);
				width: 300upx;
				height: 0;
				content: '';
				border-bottom: 1px solid #ccc;
			}
		}
	}

	/* 规格选择弹窗 */
	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-direction: column;

			.attr-item {
				border-radius: 60rpx;
				padding: 20rpx 30rpx;
				background: #ededed;

				&:not(:last-child) {
					margin-bottom: 20rpx;
				}
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}

	/*  弹出层 */
	.popup {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 99;

		&.show {
			display: block;

			.mask {
				animation: showPopup 0.2s linear both;
			}

			.layer {
				animation: showLayer 0.2s linear both;
			}
		}

		&.hide {
			.mask {
				animation: hidePopup 0.2s linear both;
			}

			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}

		&.none {
			display: none;
		}

		.mask {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			background-color: rgba(0, 0, 0, 0.4);
		}

		.layer {
			position: fixed;
			z-index: 99;
			bottom: 0;
			width: 100%;
			min-height: 40vh;
			border-radius: 10upx 10upx 0 0;
			background-color: #fff;

			.btn {
				height: 66upx;
				line-height: 66upx;
				border-radius: 100upx;
				background: $uni-color-primary;
				font-size: $font-base + 2upx;
				color: #fff;
				margin: 30upx auto 20upx;
			}
		}

		@keyframes showPopup {
			0% {
				opacity: 0;
			}

			100% {
				opacity: 1;
			}
		}

		@keyframes hidePopup {
			0% {
				opacity: 1;
			}

			100% {
				opacity: 0;
			}
		}

		@keyframes showLayer {
			0% {
				transform: translateY(120%);
			}

			100% {
				transform: translateY(0%);
			}
		}

		@keyframes hideLayer {
			0% {
				transform: translateY(0);
			}

			100% {
				transform: translateY(120%);
			}
		}
	}

	/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		//left: 30upx;
		bottom: 8upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 5upx 0 rgba(0, 0, 0, 0.2);
		border-radius: 16upx;


		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-disable-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #909399;
			box-shadow: 1px 2px 5px #909399;
			background: #909399;
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, 0.5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100upx;
			overflow: hidden;
			background: linear-gradient(to right, #00f900, #00a600, $nav-bg);
			margin-left: 20upx;
			position: relative;

			&:after {
				content: '';
				position: absolute;
				top: 50%;
				right: 50%;
				transform: translateY(-50%);
				height: 28upx;
				width: 0;
				border-right: 1px solid rgba(255, 255, 255, 0.5);
			}

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}
	}

	.tuijian-section {
		display: flex;
		flex-wrap: wrap;
		padding: 0 30upx;
		background: #fff;
	}

	.tuijian-item {
		display: flex;
		flex-direction: column;
		width: 48%;
		padding-bottom: 40upx;

	}

	.tuijian-item:nth-child(2n+1) {
		margin-right: 4%;
	}

	.image-wrapper {
		width: 100%;
		height: 260upx;
		border-radius: 3px;
		overflow: hidden;

	}

	.image-wrapper .item-image {
		width: 100%;
		height: 100%;
		opacity: 1;
	}

	.tuijian-item .title {
		font-size: $font-base;
		color: $font-color-000;
		line-height: 80upx;
	}

	.item-foot {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-foot .price {
		font-size: $font-lg;
		color: $font-color-price;
	}

	.item-foot .tag {
		font-size: $font-base;
		color: $font-color-000;
	}

	.tuijian-top {
		height: 40rpx;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
		color: $font-color-000;
	}

	.tuijian-top .left-line {
		width: 6rpx;
		height: 30rpx;
		background-color: #557FE4;
		margin-right: 20rpx;
	}

	.gwc-btn {
		width: 50rpx;
		height: 50rpx;
	}
</style>